<template>
	<div class="demo">
		<!-- 搜索栏 -->
		<van-search placeholder="请输入搜索关键词" v-model="value" />

		<!-- 轮播图 -->
		<van-swipe :autoplay="3000" class="change">
			<van-swipe-item v-for="(image, index) in images" :key="index">
				<div class="The-rounded-outer-urban">
					<img v-lazy="image" class="lazy" />
				</div>
			</van-swipe-item>
		</van-swipe>

		<div class="The-component-below">
			<!--  菜单栏-->
			<div class="menu-bar">
				<div class="Category" v-for="(item, index) in iconView" :key="index">
					<div class="icon" @click="proxy(index, item.goodsList)">
						<van-icon :name="item.icon" size="30px" color="white" />
					</div>
					<div class="text">{{ item.title }}</div>
				</div>
			</div>
			<!--限时拼团 -->
			<div class="Time-spell-group">
				限时拼团
				<div class="content">
					<div class="item" v-for="(item, index) in fruits" :key="index">
						<img :src="item.imgurl" alt="" />
						<div class="item1">
							<span class="title">{{ item.title }}</span>
							<span class="price">{{ item.total }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
	name: "",
	components: {},
	data() {
		return {
			value: "",
			images: [
				require("../assets/image/back.jpg"),
				require("../assets/image/back.jpg"),
				require("../assets/image/back.jpg"),
				require("../assets/image/back.jpg"),
				require("../assets/image/back.jpg")
			],
			iconView: [
				{
					title: "全部商品",
					icon: "bag-o",
					goodsList: "商品列表"
				},
				{
					title: "优惠券",
					icon: "award-o"
				},
				{
					title: "积分商品",
					icon: "credit-pay",
					goodsList: "积分商品"
				},
				{
					title: "积分签到",
					icon: "send-gift-o"
				}
			],
			fruits: [
				{
					imgurl: require("../assets/image/1.jpg"),
					title: "好看的图片",
					total: "￥9.90"
				},
				{
					imgurl: require("../assets/image/2.jpg"),
					title: "好看的图片",
					total: "￥10.90"
				}
			]
		};
	},
	mounted() {},
	methods: {
		...mapActions("MobilePhone", ["getHomeGoods"]),

		proxy(index, title) {
			if (index == 0 || index == 2) {
				this.toShoping(title);
			}
			return;
		},
		toShoping(goodsList) {
			this.$router.push({
				name: "ShopingPages",
				params: {
					goodsList
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.demo {
	box-sizing: border-box;

	/deep/ .van-search__content {
		border-radius: 20px;
	}

	.The-rounded-outer-urban {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		overflow: hidden;
		height: 170px;
	}
	.The-component-below {
		padding: 5px;
		.menu-bar {
			margin-bottom: 5px;
			width: 100%;
			height: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			.Category {
				background: white;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 100%;
				height: 100%;
				.icon {
					width: 40px;
					height: 40px;
					background-color: #9c88ff;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.text {
				text-align: center;
			}
		}
		.Time-spell-group {
			padding-left: 3px;
			box-sizing: border-box;
			background: white;
			//  border: 1px solid red;
			width: 100%;
			height: 200px;
			display: flex;
			flex-direction: column;
			.content {
				flex: 1;
				// border: 1px solid red;
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 120px;
					height: 120px;
					object-fit: cover;
				}
				.item {
					// border: 1px solid red;

					// height: 70px;
					// width: 130px;
					display: flex;
					flex-direction: column;

					.item1 {
						// height: 30px;
						box-sizing: border-box;
						// width: 100%;
						text-align: center;
						// border: 1px solid red;
						display: flex;
						flex-direction: column;

						.price {
							color: orange;
							//  border: 1px solid red;
						}
						.title {
							// border: 1px solid red;
						}
					}
				}
			}
		}
	}
}
</style>
